<template>
    <div>
      <!-- 使用 v-bind 指令绑定 title 属性 -->
      <h1 v-bind:title="message">{{ message }}</h1>
      <!-- 使用冒号（:）作为 v-bind 的简写 -->
      <h1 :title="message">我是标题</h1>
      <!-- 示例：设置 message 的值 -->
      <button @click="updateMessage">更改提示信息</button>
    </div>
  </template>
  
  <script lang="ts">
  import { ref } from 'vue';
  export default {
    name: 'VBind',
    setup() {
      // 定义一个响应式数据 message
      let message = ref('这是动态绑定的提示信息');
      // 方法用于更改 message 的值
      function updateMessage(){
        message.value = '提示信息已更新！';
      };
      return { message, updateMessage };
    },
  };
  </script>
  <style scoped>
  h1 {
    margin: 10px 0;
  }
  </style>
  